<template>
  <div class="contianer">
    <el-row :gutter="20">
      <el-col :span="16">
        <!-- 路径导航 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/post' }"
            >旅游攻略</el-breadcrumb-item
          >
          <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 时间、阅读 -->
        <div class="content">
          <h2 class="title">{{ content.title }}</h2>
          <div class="timer">
            <span
              >攻略：{{
                moment(content.created_at).format("YYYY-MM-DD-HH-mm")
              }}</span
            >
            <span>阅读：{{ content.watch }}</span>
          </div>
        </div>
        <!-- 正文内容 -->
        <div class="postContent" v-html="content.content"></div>
        <!-- 评论、分享 -->
        <div class="option">
          <div style="cursor: pointer">
            <i class="el-icon-edit-outline"></i
            ><span
              >评论{{ content.comments ? content.comments.length : "" }}</span
            >
          </div>
          <div
            @click="$message.warning('暂不支持分享')"
            style="cursor: pointer"
          >
            <i class="el-icon-share"></i><span>分享</span>
          </div>
        </div>
        <!-- 发表评论
        <sentComment /> -->
        <!-- 评论列表 -->
        <div class="commentList">
          <comment />
        </div>
      </el-col>
      <el-col :span="8" style="padding-left: 20px">
        <h3 class="asidetitle">相关攻略</h3>
        <asidePost />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import sentComment from "@/components/post/sentComment";
import comment from "@/components/post/comment";
import asidePost from "@/components/post/asidePost";
import moment from "moment";
export default {
  components: { sentComment, comment, asidePost },
  data() {
    return {
      moment,
      content: {},
    };
  },
  watch: {
    $route() {
      this.getPostDetail();
    },
  },
  mounted() {
    this.getPostDetail();
  },
  methods: {
    getPostDetail() {
      this.$axios({
        url: "/posts",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        this.content = res.data.data[0];
        console.log(this.content);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.contianer {
  width: 1000px;
  margin: 20px auto;
  .asidetitle {
    font-size: 18px;
    font-weight: normal;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
  }
  .content {
    margin-top: 20px;
    .title {
      line-height: 50px;
      border-bottom: 1px solid rgb(172, 172, 172);
    }
    .timer {
      display: flex;
      justify-content: flex-end;
      font-size: 14px;
      color: #ccc;
      > span {
        padding: 10px;
      }
    }
  }
  .postContent {
    margin-bottom: 50px;
    /deep/ p {
      font-size: 16px;
      line-height: 35px;
    }
    /deep/ h2 {
      margin-bottom: 4px;
    }
    /deep/ h3 {
      margin-bottom: 8px;
    }
  }
  // 使图片在指定的空间内缩放
  // max-width:100%;max-height:100%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。
  /deep/ img {
    // width: auto;
    // height: auto;
    max-width: 100%;
    max-height: 100%;
  }
  .option {
    display: flex;
    width: 355px;
    font-size: 45px;
    color: #ffa500;
    margin: 0 auto;
    > div {
      margin: 0 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    span {
      font-size: 18px;
      color: #ccc;
    }
  }
  // .commentList {
  //   border: 1px solid #eee;
  // }
}
</style>